<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList && bannerImgList.indexImg"
      class="banner-bg"
      :src="returnImg(bannerImgList.indexImg)"
      :alt="bannerImgList.indexTitle"
    >
    <div class="banner-title" v-if="bannerImgList">
      <h3>{{bannerImgList.indexName}}</h3>
      <p>{{bannerImgList.indexContent}}</p>
    </div>
    <div class="tab-box">
      <div class="tab-operation">
        <div class="tab">
          <div class="tab-title">企业动态</div>
          <div class="tab-item" v-if="tabList">
            <span
              class="current"
              v-for="(item,index) in tabList.children"
              :key="index"
              :class="activeIndex===index?'active':''"
              @click="scrollToPosition(index)"
            >{{item.indexTitle}}</span>
          </div>
        </div>
        <div class="search-box">
          <div>
            <el-input v-model="type" class="search-input"></el-input>
          </div>
          <div class="operatiion">
            <el-button type="primary" size="small" @click="search">查询</el-button>
            <!-- <el-button size="small" @click="rest">重置</el-button> -->
          </div>
        </div>
      </div>
    </div>
    <div class="article-box">
      <div class="article-wrap" v-if="tableData&&tableData.length>0">
        <div
          class="article-item"
          v-for="(item,index) in tableData"
          :key="index"
          @click="toArticleDeetail(item)"
        >
          <div class="item-date">
            <span class="date">{{getMonth(item.createTime)}}</span>
            <span class="year">{{getYear(item.createTime)}}</span>
          </div>
          <div class="item-content-box">
            <div class="item-article">
              <h3 class="item-title">{{item.indexTitle}}</h3>
              <p class="item-content">
                {{item.indexName}}
                <a
                  href="javascript:;"
                  class="details"
                  @click="toArticleDeetail(item)"
                >【详情】</a>
              </p>
            </div>
            <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
          </div>
        </div>
      </div>
    </div>
    <el-config-provider :locale="locale">
      <el-pagination
        background
        layout="prev, pager, next,total,sizes"
        :page-sizes="[20,50, 100]"
        :page-size="pageConfig.pageSize"
        :total="pageConfig.total"
        @size-change="hanldleSizeChange"
        @current-change="handleCurrentChange"
        popper-class="admin-popper"
      />
    </el-config-provider>
    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import { getNewsBanner, getNews } from "@/api/PC-Home";
//中文包
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
  components: { PcHeader, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  watch: {
    $route(to, from) {
      let toId = to.query.id;
      let toProductId = to.query.productId;
      let fromId = from.query.id;
      let fromProductId = from.query.productId;
      let toActiveIndex = Number(to.query.activeIndex);
      this.activeIndex = toActiveIndex ? toActiveIndex : 0;
      this.scrollToPosition(this.activeIndex);
      if (toId !== fromId || toProductId !== fromProductId) {
        this.getNews(toId);
      }
    }
  },
  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      activeImg: "u321.png",
      bannerImgList: [],
      tabList: {},
      activeIndex: 0,
      defaultId: null,
      tableData: [],
      pageConfig: {
        total: 100,
        pageSize: 20,
        pageNum: 1
      },
      type: "",
      locale: zhCn
    };
  },

  mounted() {
    this.getNewsBanner();
    let toId = this.$route.query.id;
    let toActiveIndex = Number(this.$route.query.activeIndex);
    this.activeIndex = toActiveIndex ? toActiveIndex : 0;
    this.getNews(toId);
  },
  methods: {
    scrollToPosition(index) {
      this.activeIndex = index;
      // document.getElementsByClassName("roll")[index].scrollIntoView();
      this.defaultId = this.tabList.children[index].id;
      this.bannerImgList = this.tabList.children[index];
      this.getNews();
    },
    returnImg(url) {
      if (url) {
        return process.env.VUE_APP_URL + "/" + url;
      }
    },
    hanldleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getNews();
    },
    handleCurrentChange(val) {
      this.pageConfig.pageNum = val;
      this.getNews();
    },
    getNewsBanner() {
      getNewsBanner().then(res => {
        let data = res.data;
        data.map(item => {
          if (item.id === "402") {
            this.tabList = item;
            this.bannerImgList = item.children[0];
            this.defaultId =
              item.children && item.children.length > 0
                ? item.children[0].id
                : "";
          }
        });
        this.scrollToPosition(this.activeIndex);
      });
    },
    getNews(val) {
      let param = {
        parentId: val ? val : this.defaultId,
        current: this.pageConfig.pageNum,
        size: this.pageConfig.pageSize,
        indexTitle: this.type
      };
      getNews(param).then(res => {
        this.tableData = res.data.records;
        this.pageConfig.total = res.data.total;
      });
    },
    rest() {
      this.type = "";
      this.getNews();
    },
    search() {
      this.getNews();
    },
    getMonth(timestamp) {
      if (!timestamp) return;
      timestamp = timestamp.replace(/-/g, "/");
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let M =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return M + "-" + D;
    },
    getYear(timestamp) {
      if (!timestamp) return;
      timestamp = timestamp.replace("/-/g", "/");
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear();
      return Y;
    },
    toArticleDeetail(item) {
      // let route = this.$router.push({path:'/articleDetail',query:{articleId:item.id}})
      const routes = this.$router.resolve({
        path: "/articleDetail",
        query: { articleId: item.id, parentId: this.defaultId }
      });
      window.open(routes.href, "_blank");
    }
  }
};
</script>
<style scoped lang="scss">
.banner-bg {
  width: 100%;
  height: 4.8rem;
}

.article-box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.685rem;
  box-sizing: border-box;

  .article-wrap {
    width: 13.714rem;
    height: auto;
    margin-top: 0.09rem;
    display: flex;
    flex-direction: column;

    .article-item {
      width: 100%;
      height: 2.057rem;
      padding: 0.182rem;
      background: #ffffff;
      border: 1px solid #dbdfe6;
      box-shadow: 0 0 0.182rem 0 rgba(0, 17, 67, 0.1);
      border-radius: 8px;
      margin-bottom: 0.09rem;
      display: flex;
      flex-direction: row;
      box-sizing: border-box;

      .item-date {
        display: flex;
        flex-direction: column;
        width: 1.485rem;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-right: 0.457rem;

        &::after {
          position: absolute;
          content: "";
          width: 1px;
          height: 1.371rem;
          background: #d8d8d8;
          top: 0.16rem;
          right: 0;
        }

        .date {
          font-family: MicrosoftYaHei;
          font-size: 0.274rem;
          color: #323233;
          line-height: 0.205rem;
          margin-bottom: 0.137rem;
        }

        .year {
          font-family: MicrosoftYaHei;
          font-size: 0.16rem;
          color: #323233;
          line-height: 0.205rem;
        }
      }

      .item-content-box {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .item-article {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .item-title {
            font-size: 0.228rem;
            color: #323233;
            line-height: 0.228rem;
            margin-bottom: 0.274rem;
          }

          .item-content {
            font-size: 0.16rem;
            color: #909293;
            line-height: 0.274rem;
            text-align: left;
          }
        }

        img {
          width: 2.285rem;
          height: 1.428rem;
          margin-left: 0.457rem;
        }
      }

      &:hover {
        border: 1px solid #1790ff;

        .item-content-box {
          .item-article {
            .item-title {
              color: #1790ff;
            }
          }
        }
      }
    }
  }
}

.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}

.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}

.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.205rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;

  .el-icon {
    margin-left: 8px;
  }
}

.tab-box {
  width: 100%;
  height: 0.685rem;
  background: #f1f4f8;

  .tab-operation {
    width: 13.714rem;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .tab {
      display: flex;
      flex-direction: row;

      .tab-title {
        padding-right: 0.182rem;
        font-family: MicrosoftYaHei-Bold;
        font-size: 0.16rem;
        color: #323233;
        letter-spacing: 0;
        position: relative;
        font-weight: bold;

        &::after {
          content: "";
          position: absolute;
          width: 2px;
          height: 8px;
          background: #cad6ec;
          right: 0;
          top: 6px;
        }
      }

      .tab-item {
        margin-left: 0.182rem;
        display: flex;

        span {
          margin-right: 0.457rem;
          font-family: MicrosoftYaHei;
          font-size: 0.16rem;
          color: #323233;
          letter-spacing: 0;
          cursor: pointer;

          &.active {
            color: #1790ff;
          }
        }
      }
    }

    .search-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: auto;
      border: 0;
      padding: 0;
      margin: 0;
    }

    .operatiion {
      height: 30px;
      display: flex;
      margin-left: 0.228rem;

      .el-button {
        height: 30px;
        background: #179ff0 !important;
        color: #fff !important;
        border: 0 !important;
      }
    }
  }
}

.culture-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  h3 {
    font-family: MicrosoftYaHei-Bold;
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 2px 4px rgba(0, 17, 67, 0.4);
  }

  p {
    font-family: MicrosoftYaHei;
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 0.342rem;
    text-shadow: 0 1px 1px rgba(0, 17, 67, 0.4);
    display: none;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;

    h3 {
      margin-bottom: 0.228rem;
    }

    p {
      display: block;
    }
  }
}

::v-deep .el-pagination {
  width: 13.714rem;
  margin: 0.228rem auto;

  .el-pager {
    li {
      &.is-active {
        background: #179ff0;
        color: #fff !important;
      }
    }
  }
}

.banner-title {
  position: absolute;
  top: 2.377rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.714rem;
  text-align: center;

  h3 {
    font-size: 1.097rem;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 0.365rem;
  }

  p {
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.457rem;
  }
}

@media only screen and (max-device-width: 768px) {
  .banner-bg {
    height: auto;
    // top: 10.457rem;
  }

  .banner-title {
    width: 100%;
    top: 2rem;
    padding: 0 0.228rem;
    box-sizing: border-box;

    h3 {
      font-size: 0.342rem;
      margin-bottom: 0.17rem;
    }
  }

  .tab-box {
    width: 100%;
    height: 0.525rem;
    padding: 0 0.228rem;
    box-sizing: border-box;

    .tab-operation {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .tab {
        overflow-x: auto;
        /* padding-bottom: 10px; */
        box-sizing: border-box;
        width: 100%;
        align-items: center;
        height: 100%;
        margin-bottom: 0;

        .tab-title {
          padding-right: 0.182rem;
          font-family: MicrosoftYaHei-Bold;
          font-size: 0.16rem;
          color: #323233;
          letter-spacing: 0;
          position: relative;
          /* width: 100px; */
          /* display: none; */
          font-weight: bold;
        }

        .tab-item {
          display: flex;
          flex-direction: row;
          .current {
            margin-right: 0.1rem;
          }
        }
      }

      .search-box {
        height: 100%;
      }

      .operatiion {
        height: 0.48rem;
        display: flex;
        margin-left: 0.228rem;

        .el-button {
          height: 0.48rem;
          background: #179ff0 !important;
          color: #fff !important;
          border: 0 !important;
        }
      }
    }
  }

  .article-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.685rem;
    box-sizing: border-box;

    .article-wrap {
      width: 100%;
      height: auto;
      padding: 0 0.228rem;
      box-sizing: border-box;

      .article-item {
        width: 100%;
        height: 2.057rem;
        padding: 0.182rem;
        background: #ffffff;
        border: 1px solid #dbdfe6;
        box-shadow: 0 0 0.182rem 0 rgba(0, 17, 67, 0.1);
        border-radius: 8px;
        margin-bottom: 0.182rem;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;

        .item-date {
          display: flex;
          flex-direction: column;
          width: 1.485rem;
          justify-content: center;
          align-items: center;
          position: relative;
          margin-right: 0.457rem;

          &::after {
            position: absolute;
            content: "";
            width: 1px;
            height: 1.371rem;
            background: #d8d8d8;
            top: 0.16rem;
            right: 0;
          }

          .date {
            font-family: MicrosoftYaHei;
            font-size: 0.274rem;
            color: #323233;
            line-height: 0.205rem;
            margin-bottom: 0.137rem;
          }

          .year {
            font-family: MicrosoftYaHei;
            font-size: 0.16rem;
            color: #323233;
            line-height: 0.205rem;
          }
        }

        .item-content-box {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .item-article {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100%;
            overflow: hidden;

            .item-title {
              text-align: left;
              font-size: 0.228rem;
              color: #323233;
              line-height: 0.288rem;
              margin-bottom: 0.174rem;
              width: 4.3rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }

            .item-content {
              /* font-size: 0.16rem;
                color: #909293;
                line-height: 0.274rem;
                text-align: left; */
              font-size: 0.16rem;
              color: #909293;
              line-height: 0.274rem;
              width: 100%;
              height: 0.82rem;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }

          img {
            width: 2.285rem;
            height: 1.428rem;
            margin-left: 0.457rem;
            display: none;
          }
        }
      }
    }
  }

  .title {
    width: 100%;
    font-size: 0.457rem;
  }

  ::v-deep .el-pagination {
    width: 100%;
    margin: 0.228rem auto;
    padding: 0 0.228rem;
    box-sizing: border-box;
  }

  .search-input {
    height: 0.38rem;
  }
}
</style>